<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频流组件</title>
</head>
<body>
    <!-- 视频流容器 -->
    <div id="streamContainer">
        <div id="placeholder">等待视频流...</div>
        <img id="videoStream" src="" alt="视频流" style="display: none;">
        <div id="status">未连接</div>
    </div>

    <script>
        class VideoStreamComponent {
            constructor(wsUrl = 'ws://localhost:9091/video-stream') {
                // 元素引用
                this.videoElement = document.getElementById('videoStream');
                this.placeholder = document.getElementById('placeholder');
                this.statusElement = document.getElementById('status');
                
                // 状态变量
                this.websocket = null;
                this.isConnected = false;
                this.wsUrl = wsUrl;
                
                // 初始化连接
                this.connect();
            }
            
            // 连接WebSocket
            connect() {
                if (this.isConnected) return;
                
                try {
                    this.websocket = new WebSocket(this.wsUrl);
                    
                    this.websocket.onopen = () => {
                        this.isConnected = true;
                        this.statusElement.textContent = '已连接';
                    };
                    
                    this.websocket.onmessage = (event) => {
                        if (event.data instanceof Blob) {
                            // 显示视频流，隐藏占位符
                            this.placeholder.style.display = 'none';
                            this.videoElement.style.display = 'block';
                            
                            // 更新视频帧
                            const blobUrl = URL.createObjectURL(event.data);
                            this.videoElement.src = blobUrl;
                        }
                    };
                    
                    this.websocket.onerror = () => {
                        this.statusElement.textContent = '连接错误';
                    };
                    
                    this.websocket.onclose = () => {
                        this.isConnected = false;
                        this.statusElement.textContent = '已断开，尝试重连...';
                        
                        // 1秒后尝试重连
                        setTimeout(() => this.connect(), 1000);
                    };
                } catch (e) {
                    console.error('连接失败:', e);
                    this.statusElement.textContent = '连接失败';
                }
            }
            
            // 断开连接
            disconnect() {
                if (this.websocket && this.isConnected) {
                    this.websocket.close();
                    this.isConnected = false;
                }
            }
        }
        
        // 初始化组件
        document.addEventListener('DOMContentLoaded', () => {
            window.videoStream = new VideoStreamComponent('ws://localhost:9091/video-stream');
        });
    </script>
</body>
</html>